// ReactDOM.render(
//     <h1>Hello, world!</h1>,
//     document.getElementById('example')
// );

// function tick() {
//     const element = (
//         <div>
//             <h1>React!</h1>
//             <h2>It is {new Date().toLocaleTimeString()}.</h2>
//         </div>
//     )
//     ReactDOM.render(element, document.getElementById('example'))
// }
// setInterval(tick, 1000)

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }
    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(), 1000
        )
    }
    componentWillUnmount() {
        clearInterval(this.timerID)
    }
    tick() {
        this.setState({
            date: new Date()
        })
    }
    render() {
        return (
            <div>
                <h1> React!</h1>
                <h2> It is {this.state.date.toLocaleTimeString()}</h2>
                <h2> It is {this.state.date.getTime()}</h2>
            </div>
        )
    }
}
ReactDOM.render(
    <Clock />,
    document.getElementById('example')
)
